<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Card from '../components/card.vue';
import Search from '../components/search.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 模拟数据获取
const fetchCards = (page = 1, pageSize = 8) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const allCards = [
        {
          id: 1,
          title: "创意/03'14'",
          description: '灵感爆棚必看的[最疯狂的脑洞风暴]',
          image: 'https://codelover.club/coursefiles/images/film/创意.jpeg',
          tag: ''
        },
        {
          id: 2,
          title: "剧情/03'14'",
          description: '悬疑迷不可错过的[最烧脑的叙事迷宫]',
          image: 'https://codelover.club/coursefiles/images/film/剧情.jpeg',
          tag: ''
        },
        {
          id: 3,
          title: "动画/03'14'",
          description: '二次元宅必追的[最治愈的奇幻之旅]',
          image: 'https://codelover.club/coursefiles/images/film/动画.jpeg'
        },
        {
          id: 4,
          title: "励志/03'14'",
          description: '低谷期必刷的[最热血的人生逆袭]',
          image: 'https://codelover.club/coursefiles/images/film/励志.jpeg',
          tag: ''
        },
        {
          id: 5,
          title: "实验/03'14'",
          description: '艺术先锋必试的[最颠覆的视觉冲击]',
          image: 'https://codelover.club/coursefiles/images/film/实验.jpeg'
        },
        {
          id: 6,
          title: "广告/03'14'",
          description: '营销人必学的[最洗脑的创意炸弹]',
          image: 'https://codelover.club/coursefiles/images/film/广告.jpeg'
        },
        {
          id: 7,
          title: "搞笑/03'14'",
          description: '解压必备的[最无厘头爆笑名场面]',
          image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg'
        },
        {
          id: 8,
          title: "旅行/03'14'",
          description: '背包客私藏的[最惊艳的小众秘境]',
          image: 'https://codelover.club/coursefiles/images/film/旅行.jpeg',
          tag: ''
        },
        {
          id: 9,
          title: "时尚/03'14'",
          description: '潮流玩家必懂的[最前卫穿搭公式]',
          image: 'https://codelover.club/coursefiles/images/film/时尚.jpeg',
          tag: ''
        },
        {
          id: 10,
          title: "汽车/03'14'",
          description: '老司机狂推的[最硬核驾驶体验]',
          image: 'https://codelover.club/coursefiles/images/film/汽车.jpeg',
          tag: ''
        },
        {
          id: 11,
          title: "混剪/03'14'",
          description: '剪辑师跪着看完的[最丝滑转场魔法]',
          image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg'
        },
        {
          id: 12,
          title: "游戏/03'14'",
          description: '电竞党尖叫的[最爽操作瞬间合集]',
          image: 'https://codelover.club/coursefiles/images/film/游戏.jpeg',
          tag: ''
        },
        {
          id: 13,
          title: "爱情/03'14'",
          description: '单身狗必学的[最撩心动信号指南]',
          image: 'https://codelover.club/coursefiles/images/film/爱情.jpeg'
        },
        {
          id: 14,
          title: "生活/03'14'",
          description: '打工人必备的[最治愈宅家小确幸]',
          image: 'https://codelover.club/coursefiles/images/film/生活.jpeg'
        },
        {
          id: 15,
          title: "科幻/03'14'",
          description: '极客圈封神的[最硬核未来预言]',
          image: 'https://codelover.club/coursefiles/images/film/科幻.jpeg'
        },
        {
          id: 16,
          title: "纪录/03'14'",
          description: '知识控狂喜的[最震撼真相揭秘]',
          image: 'https://codelover.club/coursefiles/images/film/纪录.jpeg',
          tag: ''
        }
      ];

      // 模拟分页
      const start = (page - 1) * pageSize;
      const end = start + pageSize;
      resolve(allCards.slice(start, end));
    }, 1000);
  });
};

const cards = ref([]);
const loading = ref(false);
const page = ref(1);
const hasMore = ref(true);
const pageSize = 4;

// 获取卡片数据
const loadCards = async () => {
  if (loading.value || !hasMore.value) return;

  loading.value = true;
  try {
    const newCards = await fetchCards(page.value, pageSize);
    if (newCards.length === 0) {
      hasMore.value = false;
      return;
    }

    cards.value = [...cards.value, ...newCards];
    page.value++;
  } finally {
    loading.value = false;
  }
};

// 滚动事件处理
const handleScroll = () => {
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 100 && !loading.value) {
    loadCards();
  }
};

onMounted(() => {
  loadCards();
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const handleCardClick = (cardId) => {
  router.push('/movie_show');
};
</script>

<template>
  <div class="card-list-page">
    <Search />
    <div class="card-list-container">
      <Card 
        v-for="card in cards" 
        :key="card.id" 
        :card-data="card" 
        @card-click="handleCardClick" 
        class="card-item" 
      />
    </div>
    <div v-if="loading" class="loading-more">加载中...</div>
    <div v-if="!hasMore && cards.length > 0" class="no-more">没有更多数据了</div>
  </div>
</template>

<style scoped>
.card-list-page {
  width: 100%;
  height: 100vh;
  /* padding: 20px; */
  box-sizing: border-box;
  background-color: #f5f5f5;
  margin-top: 42px;
}

.card-list-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  /* gap: 20px; */
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 5px;
}

.card-item {
  /* aspect-ratio: 1/1; */
  /* 保持卡片为正方形 */
}

/* @media (max-width: 768px) {
  .card-list-container {
    grid-template-columns: 1fr;
  }
  
  .card-list-page {
    padding: 10px;
  }
} */

.loading-more,
.no-more {
  text-align: center;
  padding: 20px;
  color: #666;
}

.loading-more {
  color: #1890ff;
}
</style>